import React from 'react';
import {connect} from 'dva';
import withRouter from 'umi/withRouter';
import {Layout} from '../../../components';
import {Form, Radio, Input, Button, Table} from 'antd';
import _ from 'lodash';
const {dispatch}=window.g_app._store


const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const {TextArea} = Input;

class InforForm extends React.Component {
    constructor(props){
        super(props)
        const {dataSource}=this.props
        this.state={
            dataSource,
            selectedRowKeys:[],
            selectedRowItems:[]
        }
        
    }
   
    componentWillReceiveProps(nextProps){
        const {dataSource}=nextProps
        this.setState({
            dataSource
        })
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this
            .props
            .form
            .validateFields((err, values) => {
                console.log(this.state.dataSource,this.state.selectedRowItems);
                
                if (!err) {
                    console.log('Received values of form: ', values);
                }
            });
    }
    // 传递给table用于接收传过来的最新table数据
    saveTableData(combineData){
        const {dataSource,selectedRowKeys,selectedRowItems}=combineData
        this.setState({
            dataSource,
            selectedRowKeys,
            selectedRowItems
        })
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                span: 2
            },
            wrapperCol: {
                span: 16
            }
        };
        return (
            <Form onSubmit={this.handleSubmit}>
                <FormItem {...formItemLayout} label="订单编号">
                    <span className="ant-form-text">XS34141242</span>
                </FormItem>
                <FormItem {...formItemLayout} label="提货类型">
                    {getFieldDecorator('type', {
                        initialValue: 'a',
                        rules: [
                            {
                                required: true
                            }
                        ]
                    })(
                        <RadioGroup>
                            <Radio value="a">提货</Radio>
                            <Radio value="b">过户</Radio>
                        </RadioGroup>
                    )}
                </FormItem>
                <FormItem {...formItemLayout} label="提货凭证">
                    {getFieldDecorator('license', {
                        rules: [
                            {
                                required: true,
                                message: '请输入提货凭证'
                            }
                        ]
                    })(<Input placeholder="请输入提货凭证，如车号等"/>)}
                </FormItem>
                <FormItem {...formItemLayout} label="提货备注">
                    {getFieldDecorator('note')(<TextArea
                        autosize={{
                        minRows: 4,
                        maxRows: 6
                    }}
                        maxLength='100'
                        placeholder='可填入备注信息（100字内）'/>)}
                </FormItem>
                <FormItem
                    wrapperCol={{
                    span: 24,
                    offset: 0
                }}>
                    <InforTable dataSource={this.state.dataSource} saveTableData={this.saveTableData.bind(this)}/>
                </FormItem>
                <FormItem
                    wrapperCol={{
                    span: 12,
                    offset: 11
                }}>
                    <Button type="primary" htmlType="submit">提交提货申请</Button>
                </FormItem>
            </Form>
        );
    }
}

const WrappedInforForm = Form.create()(InforForm);




class InforTable extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            selectedRowKeys: [],
            selectedRowItems:[],
        };
        this.columns = [
            {
                title: '品名',
                dataIndex: 'name'
            }, {
                title: '材质',
                dataIndex: 'material'
            }, {
                title: '规格',
                dataIndex: 'size'
            }, {
                title: '钢厂',
                dataIndex: 'steel'
            }, {
                title: '仓库',
                dataIndex: 'store'
            }, {
                title: '可提件数',
                dataIndex: 'relNum',
                width:150,
            }, {
                title: '可提吨数',
                dataIndex: 'relWeight',
                width:150,
            }, {
                title: '预提件数',
                dataIndex: 'preNum',
                width:150,
                render: (oldValue,item,index) => {
                    return (<Input defaultValue={oldValue} onBlur={this.onChange.bind(this,oldValue,item,index,'preNum')}/>)
                }
            }, {
                title: '预提吨数',
                width:150,
                dataIndex: 'preWeight'
            }
        ];
        
    }

    onSelectChange = (selectedRowKeys, selectedRowItems) => {
        // console.log('selectedRowKeys changed: ', selectedRowItems);
        const {saveTableData,dataSource}=this.props
        this.setState({
            selectedRowKeys,
            selectedRowItems,
            // dataSource
        },function(){
            const combineData={
                selectedRowKeys:this.state.selectedRowKeys,
                selectedRowItems:this.state.selectedRowItems,
                dataSource
            }
            saveTableData(combineData)
        });
    }
    onChange(oldValue,item,index,name,e){
        const {saveTableData}=this.props
        const newValue=e.target.value
        let dataSource = _.cloneDeep(this.props.dataSource);
        let selectedRowItems = _.cloneDeep(this.state.selectedRowItems);
   
        dataSource[index][name]=newValue
        selectedRowItems.map((selectedItem,index)=>{
            const {key}=selectedItem
            if(item.key==key){
                selectedItem[name]=newValue
            }
        })
        dispatch({
            type:'add/updateTableList',
            payload:{
                dataSource
            }
        })
        this.setState({
            selectedRowItems
        },function(){
            const combineData={
                selectedRowKeys:this.state.selectedRowKeys,
                selectedRowItems:this.state.selectedRowItems,
                dataSource:this.props.dataSource
            }
            saveTableData(combineData)
        })
    }

    render() {
        const {dataSource} =this.props;
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: this.onSelectChange
        };
        return (
            <div>
                <Table
                    title={()=>'提货信息'}
                    rowSelection={rowSelection}
                    columns={this.columns}
                    dataSource={dataSource}
                    pagination={false}/>
            </div>
        );
    }
}

function Add({children, add, dispatch, location, history}) {
    const {dataSource}=add
    return (
        <div className="white padding10">
            <div className="publicTitle" style={{fontSize:18}}>
                创建提货申请
            </div>
            <WrappedInforForm dataSource={dataSource}/>
        </div>
    )
}

export default withRouter(connect(({add}) => ({add}))(Add));
